import React, { Component } from "react";
import SearchInput from "../Search/SearchInput";
import styles from "./category.module.scss";
import PageNav from "../PageNav";
import { getCategories } from "../../utils/dataApi";
import { withRouter } from "react-router-dom";

class Category extends Component {
  state = {
    categories: [], // 全部的分类的信息
    select_index: 0,
    cateRightList: [], // 右边列表数据
  };

  async componentDidMount() {
    let res = await getCategories();
    // console.log(res);
    let message = res.message || [];
    this.setState({
      categories: message,
      cateRightList: message[0],
    });
  }

  handleItemClick = (e) => {
    let { index } = e.target.dataset;
    index = parseInt(index);
    this.setState({
      select_index: index,
      cateRightList: this.state.categories[index],
    });
  };

  // 分类菜单右边点击跳转逻辑
  handleProductItemClick = (cid) => {
    this.props.history.push("goodsList?cid=" + cid);
  };

  render() {
    return (
      <div className={styles.category}>
        <PageNav title='商品分类' left={true}></PageNav>

        {/* 首页搜索框 */}
        <SearchInput></SearchInput>

        {/* 商品分类列表区 */}
        <div className={styles.categoryList}>
          {/* 左边目录 */}
          <div className={styles.categoryListLeft} onClick={this.handleItemClick}>
            {this.state.categories.map((item, index) => {
              return (
                <div
                  data-index={index}
                  key={item.cat_id}
                  className={
                    this.state.select_index === index
                      ? styles.leftItem + " " + styles.active
                      : styles.leftItem
                  }
                >
                  {item.cat_name}
                </div>
              );
            })}
          </div>

          {/* 右边目录 */}
          <div className={styles.categoryListRight}>
            {this.state.cateRightList.children &&
              this.state.cateRightList.children.map((item) => {
                return (
                  <div key={item.cat_id} className={styles.rightItem}>
                    {/* 商品列表标题 */}
                    <div className={styles.rightItemTitle}>/{item.cat_name}/</div>

                    {/* 商品列表内容 */}
                    <div className={styles.rightItemList}>
                      {item.children &&
                        item.children.map((childItem) => {
                          return (
                            <div
                              key={childItem.cat_id}
                              className={styles.listProductItem}
                              onClick={this.handleProductItemClick.bind(this, childItem.cat_id)}
                            >
                              <div className={styles.imgWrapper}>
                                <img src={childItem.cat_icon} alt="" />
                              </div>
                              <div>{childItem.cat_name}</div>
                            </div>
                          );
                        })}
                    </div>
                  </div>
                );
              })}
          </div>
          {/* 右边目录结束 */}
        </div>
      </div>
    );
  }
}

export default withRouter(Category);
